import 'package:find_friend/const/const.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SettingNotifierPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff9f9f9),
      appBar: AppBar(
        title: Text("消息通知"),
        backgroundColor: Colors.white,
        centerTitle: true,
        leading: IconButton(
          onPressed: (){
            Navigator.of(context).pop();
          },
          icon: Image.asset("assets/fanhui.png"),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: const EdgeInsets.fromLTRB(11, 14, 20, 9.5),
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: const Color(0xffdddddd), width: 0.5),
                  borderRadius: BorderRadius.circular(5)
                ),
                child: Column(
                  children: [
                    SettingNotifierCell(title:"声音"),
                    SizedBox(height: 15,),
                    SettingNotifierCell(title:"震动"),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top:20.0, bottom: 10),
                child: Text("通知显示", style: instanceTextStyle(11, APP_font_grey),),
              ),
              Container(
                padding: const EdgeInsets.fromLTRB(11, 14, 20, 9.5),
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: const Color(0xffdddddd), width: 0.5),
                  borderRadius: BorderRadius.circular(5)
                ),
                child: Column(
                  children: [
                    SettingNotifierCell(title:"通知栏"),
                    SizedBox(height: 15,),
                    SettingNotifierCell(title:"锁屏"),
                    SizedBox(height: 15,),
                    SettingNotifierCell(title:"图标显示未读"),
                    SizedBox(height: 15,),
                    SettingNotifierCell(title:"退出后仍接收"),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class SettingNotifierCell extends StatelessWidget {

  bool isopen;
  String title;
  Function(bool isopen) onTap;

  SettingNotifierCell({
    this.isopen = false, 
    this.title = "",
    this.onTap
  });


  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(title, style: instanceTextStyle(14, APP_font_black),),
        Container(
          height: 20,
          width: 45,
          child: CustomSwitchButton(
            activeColor: APP_main_color,
            value: isopen,
            thumbHeight: 20,
            onChanged: onTap,
          ),
        )
      ],
    );
  }
}

class CustomSwitchButton extends StatefulWidget {

  final bool value;
  final Function(bool value) onChanged;
  final double thumbHeight;
  final Color activeColor;
  final Color inactiveColor;

  CustomSwitchButton({
    @required this.value, 
    this.onChanged, 
    this.activeColor = APP_main_color,
    this.thumbHeight,
    this.inactiveColor = const Color(0xfff9f9f9),
  });

  @override
  _CustomSwitchButtonState createState() => _CustomSwitchButtonState();
}

class _CustomSwitchButtonState extends State<CustomSwitchButton> with SingleTickerProviderStateMixin {

  Animation<Alignment> _circleAnimation;
  AnimationController _animationController;
  Animation<double> _colorAnimation;
  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 150));
    _circleAnimation = AlignmentTween(begin: Alignment.centerLeft,end: Alignment.centerRight).animate(CurvedAnimation(parent: _animationController, curve: Curves.linear));
    _colorAnimation = Tween<double>(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: _animationController, curve: Curves.ease));
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  void didUpdateWidget(CustomSwitchButton oldWidget) {
    super.didUpdateWidget(oldWidget);
    if(widget.value) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _circleAnimation,
      child: Container(
                width: widget.thumbHeight,
                height: widget.thumbHeight,
                decoration: BoxDecoration(
                  shape: BoxShape.circle, 
                  color: Colors.white,
                  border: Border.all(color:const Color(0xffdddddd), width: 0.5)
                ),
              ),
      builder: (context, child){
        return GestureDetector(
          onTap: () {
            if(widget.onChanged != null) {
              widget.onChanged(widget.value);
              if (_animationController.isCompleted) {
                _animationController.reverse();
              } else {
                _animationController.forward();
              }
            }
          },
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20.0),
                color: widget.value ? widget.activeColor.withOpacity(_colorAnimation.value) : widget.inactiveColor,
                border: Border.all(color: const Color(0xffdddddd), width: 0.5)
            ),
            child: Padding(
              padding: const EdgeInsets.only(top: 1.0, bottom: 1.0, right: 1.0, left: 1.0),
              child: Align(
              alignment: _circleAnimation.value,
              child: child
            ),
            ),
          ),
        );
      },
    );
  }
}